<template>
  <div>
    <el-card class="box-card">
      <!-- 表头 -->
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home/use' }">用户列表</el-breadcrumb-item>
          <el-breadcrumb-item>用户详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 用户信息 -->
      <el-form :label-position="labelPosition" label-width="80px">
        <el-form-item label="用户头像">
          <el-image
            style="width: 100px; height: 80px"
            :src="formLabelAlign.userHeadImg"
            :disabled="true"
          ></el-image>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="formLabelAlign.userName" style="width:600px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formLabelAlign.userPhone" style="width:600px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input style="width:600px" v-model="sex" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-input v-model="formLabelAlign.userBirthday" style="width:600px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-input v-model="formLabelAlign.userCity" style="width:600px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="formLabelAlign.userSignature" style="width:600px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="金币余额">
          <el-input v-model="formLabelAlign.userGoldCoin" style="width:600px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="宠币余额">
          <el-input v-model="formLabelAlign.userCurrency" style="width:600px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="宠物数量">
          <el-input v-model="formLabelAlign.userPetNumber" style="width:600px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="口粮余额">
          <el-input v-model="formLabelAlign.userRations" style="width:600px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-input v-model="formLabelAlign.userCreateTime" style="width:600px" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <!-- 分隔线 -->
      <el-divider></el-divider>
      <!-- 动物信息 -->
      <div class="zoon" v-for="(item ,index) in userPet" :key="index">
        <div class="zoonNum">宠物{{index+1}}</div>
        <div class="status">宠物状态：{{item.petStatus==1?'有效':'无效'}}</div>
        <div class="zoomMessage">
          <div class="zoomLeft">
            <el-image :src="item.petHeadImg" @click="lookdogIMG(item.petHeadImg)"></el-image>
          </div>
          <div class="zooright">
            <div class="zoomtop">
              <span>{{item.petName}}</span>
              <span>{{PetTime(item.petBirthday)}}</span>
            </div>
            <div class="zoombootom">
              <span>{{item.petPostNumber}}动态</span>
              <span>{{item.petFans}} 粉丝</span>
              <!-- <span>28 关注</span> -->
            </div>
          </div>
        </div>
        <div class="zoomName">{{item.petVarieties}}</div>
      </div>
    </el-card>
    <!-- 查看图片 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查看图片地址
      dialogImageUrl: "",
      dialogVisible: false,
      newTime: new Date().getTime(),
      labelPosition: "left",
      sex: "", //性别
      formLabelAlign: {}, //用户信息
      userPet: [] //宠物资料
    };
  },
  created() {
    this.lookUser();
  },
  methods: {
    // 查询用户详情订单
    lookUser() {
      // console.log(this.$route.query.userId);
      this.$http.article
        .getuser({ petUserId: this.$route.query.userId })
        .then(res => {
          console.log("获取用户详情", res);
          this.formLabelAlign = res.result;
          this.sex = res.result.userSex == 1 ? "男" : "女";
          // 获取宠物资料
          this.userPet = res.result.userPet;
        });
    },
    // 查看图片
    lookdogIMG(val) {
      this.dialogImageUrl = val;
      this.dialogVisible = true;

      console.log("获取图片地址", val);
    },
    // 计算宠物生日时间
    PetTime(val) {
      //获取当前时间并打印
      //     var that = this;
      // 　　let yy = new Date().getFullYear();
      // 　　let mm = new Date().getMonth()+1;
      // 　　let dd = new Date().getDate();
      // 　　let hh = new Date().getHours();
      // 　　let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      // 　　let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      //     let newTime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;

      // // 获取当前时间戳
      // let newTime = Date.parse(new Date());
      // // var timestamp2 = (new Date()).valueOf();

      // console.log("获取当前日期", newTime);
      // console.log("宠物生日", val);

      // var date = Date.parse(new Date(val));

      // console.log("返回的日期：",date)
      // // var time = date.getTime();

      // var start_endTime = newTime - date;

      return this.isshowFlag(new Date(), new Date(val));
      console.log("差值：", this.isshowFlag(new Date(), new Date(val)));
    },

    isshowFlag(begin, end) {
      // let begin = new Date(date1);
      // let end = new Date(date2);

      // 如果开始时间晚于结束时间，交换日期，并记录交换状态
      let swap = false;
      if (begin > end) {
        let tmp = begin;
        begin = end;
        end = tmp;
        swap = true;
      }

      // 分别取二个日期的年、月、日值
      let d1 = begin.getDate();
      let m1 = begin.getMonth() + 1;
      let y1 = begin.getFullYear();
      let d2 = end.getDate();
      let m2 = end.getMonth() + 1;
      let y2 = end.getFullYear();

      // 获取每个月的天数，这里要注意一下闰年的2月
      var getMonthDays = function(y, m) {
        var aMonthDays = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        if (m == 2 && (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0))) {
          return 29;
        }
        return aMonthDays[m];
      };

      let y, m, d;
      let tempD = 0;
      let tmpM = 0;
      let tmpY = 0;

      // 计算日，不足时向月份借
      if (d2 >= d1) {
        d = d2 - d1;
      } else {
        tmpM = -1;
        d = getMonthDays(y1, m1) + d2 - d1;
      }

      // 计算月，不足时向年份借
      if (m2 + tmpM >= m1) {
        m = m2 + tmpM - m1;
      } else {
        tmpY = -1;
        m = 12 + m2 + tmpM - m1;
      }

      // 计算年
      y = y2 + tmpY - y1;

      // 拼接距离字符串 输出格式如："5天"， "5月 05天"， "5年 05月 05日"
      let str = "";
      if (y > 0) {
        // str = y + '年 ' + ("0" + m).substr(-2) + "月 " + ("0" + d).substr(-2) + '天'
        str = y + "年"; //+ ("0" + m).substr(-2) + "月 ";
        console.log("m", m);
        if (m > 0) {
          str = y + "年" + m + "个月";
        }
      } else if (m > 0) {
        // str = m + "月 " + ("0" + d).substr(-2) + '天 '
        str = m + "个月 ";
      } else if (d > 0) {
        str = d + "天 ";
      }

      // 完整输出
      return str; //"开始" + " 比 " + "结束" + (swap ? " 晚 " : " 早 ") + str;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-image__error {
  display: none;
}

.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  //   overflow: hidden;
}
.box-card {
  //   display: flex;
  //   justify-content: center;
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
.zoon {
  width: 4 00px;
  height: 198px;
  // background-color: palegreen;
  margin-top: 10px;
  .zoonNum {
    font-size: 20px;
    font-family: Microsoft YaHei;
    margin-left: 16px;
    font-weight: bold;
    padding-top: 16px;
  }
  .status {
    width: 222px;
    text-align: right;
    font-size: 16px;
    font-family: Microsoft YaHei;
    margin-left: 10px;
    color: #606266;
    font-weight: 800px;
  }
  .zoomMessage {
    width: 400px;
    height: 100px;
    // background-color: palevioletred;
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;

    .zoomLeft {
      width: 100px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-color: red;
    }
    .zooright {
      .zoomtop {
        font-size: 18px;
        font-family: Microsoft YaHei;
        margin-left: 10px;
        font-weight: bold;
        color: #606266;
        padding-top: 18px;
        padding-bottom: 20px;
        span {
          margin-left: 10px;
        }
      }
      .zoombootom {
        font-size: 16px;
        font-family: Microsoft YaHei;
        margin-left: 10px;
        color: #606266;
        font-weight: 800px;
        padding-bottom: 20px;
        span {
          margin-left: 10px;
        }
      }
    }
  }
  .zoomName {
    vertical-align: middle;
    font-family: Microsoft YaHei;
    float: left;
    font-size: 16px;
    color: #606266;
  }
}
</style>